<template>
  <div class="app-container calendar-list-container">

    <div class="filter-container">
      <el-button-group>
        <el-button type="primary" icon="plus" @click="handleAdd()">添加</el-button>
        <el-button type="primary" icon="edit" @click="handleEdit()">编辑</el-button>
        <el-button type="primary" icon="delete" @click="handleDelete()">删除</el-button>
      </el-button-group>
    </div>

    <el-row :gutter="10">
      <el-col :xs="14" :sm="12" :md="10" :lg="10" :xl="8">
        <el-card class="tree-warp">
          <tree :tree-data="treeData" @node-select="handleSelect" @node-add="handleAdd" @node-edit="handleEdit" @node-delete="handleDelete" />
        </el-card>
      </el-col>
      <el-col :xs="10" :sm="12" :md="14" :lg="14" :xl="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span v-if="selectNode">【{{ selectNode.title }}】按钮或资源</span>
            <span v-else>【所有】按钮或资源</span>
          </div>
          <menu-element ref="menuElement" :tree-map="treeMap" :tree-data="treeData" :scope="scope" :menu-id="selectNode?selectNode.id:-1" />
        </el-card>
      </el-col>
    </el-row>
    <node-dialog ref="nodeDialog" :scope="scope" />

  </div>
</template>

<script>
import Tree from './tree'

import { delMenu, fetchTree } from '@/api/menu'
import { recursiveTraverse, menusTreeToList, menusListToMap } from '@/utils/menusUtil'
import NodeDialog from './node'

export default {
  components: {
    'menu-element': () => import('./resourceList'), Tree, NodeDialog
  },
  props: {
    scope: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      listQuery: {
        name: undefined
      },
      selectNode: null,
      treeData: [],
      treeList: null,
      treeMap: null,
      filterText: ''
    }
  },
  watch: {
    treeData(val) {
      this.treeList = menusTreeToList(val)
      this.treeMap = menusListToMap(this.treeList, 'id')
    }
  },

  mounted() {
    this.fetchTree()
  },

  methods: {
    fetchTree() {
      return fetchTree(this.listQuery, this.scope).then(res => {
        // 默认展开所有的菜单
        for (let i = 0; i < res.data.length; i++) {
          res.data[i]['expanded'] = true
          recursiveTraverse(res.data[i], (node) => {
            node['expanded'] = !!node.enabled
          })
        }
        this.treeData = res.data
        return res.data
      })
    },

    handleSelect(node) {
      if (node && node.selected) {
        this.selectNode = node
      } else {
        this.selectNode = null
      }
    },

    handleEdit(params) {
      let menuId
      if (params) {
        menuId = params.id
      } else if (this.selectNode) {
        menuId = this.selectNode.id
      } else {
        this.$message.warning('请先选择菜单节点')
        return -1
      }
      this.$refs.nodeDialog.openEdit(menuId, this.treeData).then(() => {
        this.fetchTree()
      })
    },

    handleAdd(params) {
      let parentId
      if (params) {
        parentId = params.id
      } else if (this.selectNode) {
        parentId = this.selectNode.id
      }

      this.$refs.nodeDialog.openAdd(parentId, this.treeData).then(() => {
        this.fetchTree()
      })
    },

    handleDelete(params) {
      let menu
      if (params) {
        menu = params
      } else if (this.selectNode) {
        menu = this.selectNode
      } else {
        this.$message.warning('请先选择菜单节点')
        return -1
      }

      if (menu.children && menu.children.length > 0) {
        this.$message.error('无法删除具有子节点的菜单')
        return -1
      }

      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(menu.id, this.scope).then((res) => {
          if (res.code === 0) {
            this.fetchTree()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .tree-warp {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  .filter-container{
	  .el-button-group .el-button--primary{
		  background-color: $btnBgc;
		  border: none;
	  }
	  .el-button-group .el-button--primary:hover{
	  	  opacity: 0.5;
	  }
  }
</style>
